<template>
  <view v-if="showLoading" :class="['loading-overlay', { 'fade-out': !visbile }]" class="fixed bottom-0 left-0 right-0 top-0 z-100 flex items-center justify-center bg-slate-100">
    <image src="https://trade-marketing-prod-oss.pin-dao.cn/product/1748252765877.gif" class="w-[200px]" mode="widthFix" />
  </view>
</template>

<script setup lang="ts">
import { ref, watch, nextTick } from 'vue'

const visbile = defineModel('visbile', {
  type: Boolean,
  default: false,
})

const showLoading = ref(false)

watch(
  visbile,
  async (newVal) => {
    if (newVal) {
      // 显示时立即显示
      showLoading.value = true
    } else {
      // 隐藏时等待动画完成后再隐藏
      await nextTick()
      setTimeout(() => {
        showLoading.value = false
      }, 300) // 与CSS transition时间保持一致
    }
  },
  { immediate: true }
)
</script>

<style scoped>
.loading-overlay {
  opacity: 1;
  transition: opacity 0.3s ease;
}

.loading-overlay.fade-out {
  opacity: 0;
}
</style>
